<template>
  <section class="p-4 space-y-4 sm:space-y-8 lg:space-y-16 pt-8 pb-32">
    <h2 class="title text-white">发展经历</h2>

    <div
      class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl gsap-work"
    >
      <div class="md:flex">
        <div class="md:shrink-0">
          <img
            class="h-48 w-full object-cover md:h-full md:w-48"
            src="/imgs/hncj.jpg"
          />
        </div>
        <div class="p-8 text-sm">
          <a
            class="block mt-1 text-lg leading-tight font-bold tracking-widest text-black hover:underline"
            href="https://baike.baidu.com/item/河南城建学院"
            target="_blank"
          >
            河南城建学院
          </a>
          <div class="text-indigo-500 mt-2">
            2012 - 2016
            <span class="pl-2">本科</span>
          </div>
          <div class="text-gray-500">计算机/信息管理与信息系统专业</div>
          <div class="text-gray-500">
            专业方向
            <span class="text-indigo-500"> C#、ASP.NET、WEB </span>程序开发
          </div>
          <div class="text-gray-500">
            参加了
            <span class="text-indigo-500"> cisco </span>网络课程的培训
          </div>
        </div>
      </div>
    </div>

    <div
      class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl gsap-work"
    >
      <div class="md:flex">
        <div class="md:shrink-0">
          <img
            class="h-48 w-full object-cover md:h-full md:w-48"
            src="/imgs/jf.jpg"
          />
        </div>
        <div class="p-8 text-sm">
          <a
            class="block mt-1 text-lg leading-tight font-bold tracking-widest text-black"
            target="_blank"
          >
            运维/实施
          </a>
          <div class="text-indigo-500 mt-2">
            2016 - 2018
            <span class="pl-2">信安世纪</span>
          </div>
          <div class="text-gray-500">学过网络，懂路由交换，会调试设备</div>
          <div class="text-gray-500">
            在中国移动IDC机房做运维，以及做过一段时间的售后实施
          </div>
        </div>
      </div>
    </div>

    <div
      class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl gsap-work"
    >
      <div class="md:flex">
        <div class="md:shrink-0">
          <img
            class="h-48 w-full object-cover md:h-full md:w-48"
            src="/imgs/qd.jpg"
          />
        </div>
        <div class="p-8 text-sm">
          <a
            class="block mt-1 text-lg leading-tight font-bold tracking-widest text-black"
            target="_blank"
          >
            自学前端
          </a>
          <div class="text-indigo-500 mt-2">
            2018 - ?<span class="pl-2">自学</span>
          </div>
          <div class="text-gray-500">
            花了点时间，在网上看视频，自学一段时间的前端开发(非0基础)
          </div>
          <div class="text-gray-500">
            计算机专业出身，但学校的前端课程有点过时
          </div>
        </div>
      </div>
    </div>

    <div
      class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl gsap-work"
    >
      <div class="md:flex">
        <div class="md:shrink-0">
          <img
            class="h-48 w-full object-cover md:h-full md:w-48"
            src="/imgs/zd.png"
          />
        </div>
        <div class="p-8 text-sm" style="max-width: 480px">
          <a
            class="block mt-1 text-lg leading-tight font-bold tracking-widest text-black"
            target="_blank"
          >
            前端开发
          </a>
          <div class="text-indigo-500 mt-2">
            2018 - 2019
            <span class="pl-2">郑州正度</span>
          </div>
          <div class="text-gray-500">
            一家小公司，项目比较杂，用到的技术主要有 jqery 和 uniapp
            积攒了一些经验。技术相对老旧，又碍于技术进步(后期不让用vue等新技术)，就离职了。
          </div>
        </div>
      </div>
    </div>

    <div
      class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl gsap-work"
    >
      <div class="md:flex">
        <div class="md:shrink-0">
          <img
            class="h-48 w-full object-cover md:h-full md:w-48"
            src="/imgs/qdk.png"
          />
        </div>
        <div class="p-8 text-sm">
          <a
            class="block mt-1 text-lg leading-tight font-bold tracking-widest text-black"
            target="_blank"
          >
            前端开发
          </a>
          <div class="text-indigo-500 mt-2">
            2020 - 2022
            <span class="pl-2">企大咖</span>
          </div>
          <div class="text-gray-500">
            网站开发：主要涉及有企业官网、产品展示、活动策划等。
          </div>
          <div class="text-gray-500">
            uniapp开发：主要涉及安卓应用和小程序。
          </div>
          <div class="text-gray-500">以及一些其他杂项(二次开发等)</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { onMounted } from 'vue'
import { gsap, ScrollTrigger } from 'gsap/all'
gsap.registerPlugin(ScrollTrigger)

onMounted(() => {
  gsap.utils.toArray('.gsap-work').forEach((work) => {
    gsap.from(work, {
      scrollTrigger: {
        trigger: work,
        start: 'top bottom',
        toggleActions: 'restart none none reset'
      },
      yPercent: 80,
      opacity: 0,
      duration: 0.4
    })
  })
})
</script>

<style scoped>
section {
  background: linear-gradient(135deg, #536976, #292e49);
}
</style>
